<!-- 顶部的搜索输入框组件 -->
<template>
	<view class="search-box" :style="{background: searchBgc}">
		<u-search :placeholder="placeholder" v-model="keyword" :clearabled="false" :show-action="false" height="64" bg-color="#F4F6FA" @change="searchChange"></u-search>
	</view>
</template>

<script>
	export default {
		name:"search",
		props: {
			// 搜索框外的区域的颜色
			searchBgc: {
				type: String,
				default: '#FFF'
			},
			// 提示文字
			placeholder: {
				type: String,
				default: '请输入搜索关键字'
			}
		},
		data() {
			return {
				keyword: '',
				// 设置节流阀(false 为 关闭状态)
				isInput: false,
			};
		},
		methods: {
			// 搜索输入框内容发生变化的事件
			searchChange() {
				// 先判断节流阀的状态,如果为 true 则 return
				if(this.isInput) return
				this.isInput = true
				setTimeout(() => {
					this.$emit('change', this.keyword)
					this.isInput = false
				}, 800)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		width: 100%;
		// height: 104rpx;
		padding: 20rpx 24rpx 0;
	}
</style>
